<template>
    <div>
      <p />
        <table width="300" height="300" align="center" border="1">
          <caption><h3>用户详细信息</h3></caption>
          <tr align="center">
            <td>编号</td>
            <td>{{userlist[index].id}}</td>
          </tr>
          <tr align="center">
            <td>姓名</td>
            <td>{{userlist[index].name}}</td>
          </tr>
          <tr align="center">
            <td>年龄</td>
            <td>{{userlist[index].age}}</td>
          </tr>
    
           <tr align="center">
            <td>性别</td>
            <td>{{userlist[index].sex}}</td>
          </tr>
           <tr align="center">
            <td>生日</td>
            <td>{{userlist[index].birthday}}</td>
          </tr>
           <tr align="center">
            <td>电话</td>
            <td>{{userlist[index].telphone}}</td>
          </tr>
          <tr>
            <td align="center" colspan="2"><button @click="goback()"> 返 回 </button></td>
          </tr>
        </table>
        </div>
    
    </template>
    
    <script>
    import { reactive, toRefs } from 'vue'
    import { useRoute, useRouter } from 'vue-router'
    export default {
      setup () {
        const state = reactive({
          userlist: [
            {
              id: 1,
              name: '张三',
              age: 25,
              sex: '男',
              birthday: '1995.04.01',
              telphone: '13712345678'
            },
            {
              id: 2,
              name: '李四',
              age: 18,
              sex: '女',
              birthday: '2002.08.13',
              telphone: '13787654321'
            },
            {
              id: 3,
              name: '王二',
              age: 17,
              sex: '女',
              birthday: '2003.09.20',
              telphone: '13712345678'
            }
          ],
          index: 0
        })
        const route = useRoute()
        state.index = route.query.id
        const router = useRouter()
        const goback = () => router.go(-1)
        return {
          ...toRefs(state),
          goback
        }
      }
    }
    </script>
    
    <style scoped>
    
    </style>
    